<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="zh-cn">

<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<TITLE>包含框模型</TITLE>
<link rel="stylesheet" href="style/default.css" type="text/css">
<link rel="prev" href="media.html">
<link rel="next" href="visuren.html">
<link rel="contents" href="cover.html#minitoc">
<link rel="CSS-properties" href="propidx.html" title="properties">
<link rel="index" href="indexlist.html" title="index">
</HEAD>
<BODY>
<div class="navbar" align="center">
<p><a href="media.html">上一篇</a> &nbsp;
<a href="visuren.html">下一篇</a> &nbsp;
<a href="cover.html#minitoc">目录</a> &nbsp;
<a href="propidx.html">属性</a> &nbsp;
<a href="indexlist.html">索引</a> &nbsp;
</div>
<hr class="navbar">

<H1 align="center">8 <a name="box-model">包含框模型</a></H1>
<div class="subtoc">
<p>&nbsp;&nbsp;&nbsp;&nbsp;<strong>目录</strong>
  <ul class="toc">
    <li class="tocline2"><a href="box.html#box-dimensions" class="tocxref">8.1 框的尺寸</a>
    <li class="tocline2"><a href="box.html#mpb-examples" class="tocxref">8.2 边距，边白和边框的示例</a>
    <li class="tocline2"><a href="box.html#margin-properties" class="tocxref">8.3 边距属性：<span class="propinst-margin-top">'margin-top'</span>，<span class="propinst-margin-right">'margin-right'</span>，<span class="propinst-margin-bottom">'margin-bottom'</span>，<span class="propinst-margin-left">'margin-left'</span>及<span class="propinst-margin">'margin'</span></a>
    <ul class="toc">
      <li class="tocline3"><a href="box.html#collapsing-margins" class="tocxref">8.3.1 边距重合</a>
    </ul>
    <li class="tocline2"><a href="box.html#padding-properties" class="tocxref">8.4 边白属性：<span class="propinst-padding-top">'padding-top'</span>，<span class="propinst-padding-right">'padding-right'</span>，<span class="propinst-padding-bottom">'padding-bottom'</span>，<span class="propinst-padding-left">'padding-left'</span>及<span class="propinst-padding">'padding'</span></a>
    <li class="tocline2"><a href="box.html#border-properties" class="tocxref">8.5 边框属性</a>
    <ul class="toc">
      <li class="tocline3"><a href="box.html#border-width-properties" class="tocxref">8.5.1 边框宽度：<span class="propinst-border-top-width">'border-top-width'</span>，<span class="propinst-border-right-width">'border-right-width'</span>，<span class="propinst-border-bottom-width">'border-bottom-width'</span>，<span class="propinst-border-left-width">'border-left-width'</span>及<span class="propinst-border-width">'border-width'</span></a>
      <li class="tocline3"><a href="box.html#border-color-properties" class="tocxref">8.5.2 边框颜色：<span class="propinst-border-top-color">'border-top-color'</span>，<span class="propinst-border-right-color">'border-right-color'</span>，<span class="propinst-border-bottom-color">'border-bottom-color'</span>，，<span class="propinst-border-left-color">'border-left-color'</span>及<span class="propinst-border-color">'border-color'</span></a>
      <li class="tocline3"><a href="box.html#border-style-properties" class="tocxref">8.5.3 边框类型：<span class="propinst-border-top-style">'border-top-style'</span>，<span class="propinst-border-right-style">'border-right-style'</span>，<span class="propinst-border-bottom-style">'border-bottom-style'</span>，<span class="propinst-border-left-style">'border-left-style'</span>及<span class="propinst-border-style">'border-style'</span></a>
      <li class="tocline3"><a href="box.html#border-shorthand-properties" class="tocxref">8.5.4 边框缩写属性：<span class="propinst-border-top">'border-top'</span>，<span class="propinst-border-bottom">'border-bottom'</span>，<span class="propinst-border-right">'border-right'</span>，<span class="propinst-border-left">'border-left'</span>及<span class="propinst-border">'border'</span></a>
    </ul>
  </ul>
</div>

<p>&nbsp;&nbsp;&nbsp;&nbsp;CSS包含框模型描述了<a href="conform.html#doctree">文档树</a>中元素产生的长方形包含框，它们根据<a href="visuren.html">可视化格式模型</a>来布局。<A href="page.html">页面框</A>是一类特殊的框，它的描述见<A href="page.html">页面介质</a>一章。

<H2>8.1 <a name="box-dimensions">框的尺寸</a></H2> 

<p>&nbsp;&nbsp;&nbsp;&nbsp;每一个框都有一个<span class="index-def" title="box::content|content::of a box"><a name="box-content-area"><dfn>内容区</dfn></a></span>（如文本，图形等等）以及可选的环绕在周围的<span class="index-def" title="box::padding|padding::of a box"><a name="box-padding-area"><dfn>边白</dfn></a></span>，<span class="index-def" title="box::border|border::of a box"><a name="box-border-area"><dfn>边框</dfn></a></span>以及<span class="index-def" title="box::margin|margin::of a box"><a name="box-margin-area"><dfn>边距</dfn></a></span>区域；每个区域的尺寸由下面讨论的属性规定。下面这张图展示了这些区域如何相互关联，以及用来引用边距，边框和边白等部分的术语：</P>

<div class="figure">
<p>&nbsp;&nbsp;&nbsp;&nbsp;<img src="./images/boxdim.gif"
     alt="Image illustrating the relationship between content, padding, borders, and margins."><SPAN class="dlink">&nbsp;&nbsp;&nbsp;<A name="img-boxdim" href="images/longdesc/boxdim-desc.html" title="Long description of illustration of box areas">[D]</A></SPAN></P>
</div>

<p>&nbsp;&nbsp;&nbsp;&nbsp;边距，边框和边白可以细分为左右顶底四部分（例如，在图形中，"LM"代表左边距，"RP"代表右边白，"TB"代表顶边框，等等）。

<p>&nbsp;&nbsp;&nbsp;&nbsp;四个区域（内容，边白，边框和边距）的每一个边界称为一个“边”，因此，每一个框有四条边：</P>

<dl>
<dt><span class="index-def"
title="content edge"><a name="content-edge"><strong>内容边</strong></a></span>或<span class="index-def" title="inner edge"><a name="inner-edge"><strong>内边</strong></a></span>
<dd>内容边包围元素的<a href="conform.html#rendered-content">经渲染的内容</a>。
<dt><span class="index-def" title="padding edge"><a name="padding-edge"><strong>边白边</strong></a></span>
<dd>边白边围绕框的边白。如果边白宽度为0，则边白边和内容边重合。框的边白边定义了有框生成的<a href="visuren.html#containing-block">包含块</a>的边。
<dt><span class="index-def" title="border edge"><a name="border-edge"><strong>边框边</strong></a></span>
<dd>边框边围绕框的边框。如果边框宽度为0，边框边和边白边重合。
<dt><span class="index-def" title="margin edge"><a name="margin-edge"><strong>边距边</strong></a></span>或<span class="index-def" title="outer edge"><a name="outer-edge"><strong>外边</strong></a></span>
<dd>边距边围绕框的边距。如果边距宽度为0，边距边和边框边重合。
</dl>

<p>&nbsp;&nbsp;&nbsp;&nbsp;每一个边可以细分为左右顶底四类。 

<p>&nbsp;&nbsp;&nbsp;&nbsp;框的内容区尺寸——<span class="index-def" title="box::content width"><a name="content-width"><dfn>内容宽度</dfn></a></span>和<span class="index-def" title="box::content height"><a name="content-height"><dfn>内容高度</dfn></a></span>——取决于若干个因素：产生框的元素是否设置了<a href="visudet.html#propdef-width" class="noxref"><span class="propinst-width">'width'</span></a>或<a href="visudet.html#propdef-height" class="noxref"><span class="propinst-height">'height'</span></a>属性，框是否包含文本或其它框，框是否是一个表格等等。框的宽度和高度讨论，参见<a href="visudet.html">可视化格式模型的细节</a>一章。

<p>&nbsp;&nbsp;&nbsp;&nbsp;<span class="index-def" title="box::width"><a name="the-box-width"><dfn>框的宽度</dfn></a></span>由左右边距、左右边框、左右边白和内容的宽度相加得到。<span class="index-def" title="box::height"><a name="the-box-height"><dfn>高度</dfn></a></span>由顶底边距、顶底边框、顶底边白和内容的高度相加得到。

<p>&nbsp;&nbsp;&nbsp;&nbsp;框的不同区域的背景样式是这样决定的：</p>

<ul>
<li><em>内容区</em>：产生该区域的元素的<a href="colors.html#propdef-background" class="noxref"><span class="propinst-background">'background'</span></a>属性。
<li><em>边白区</em>：产生该区域的元素的<a href="colors.html#propdef-background" class="noxref"><span class="propinst-background">'background'</span></a>属性。
<li><em>边框区</em>：产生该区域的元素的<a href="#border-properties">边框属性</a>。
<li><em>边距区</em>：边距总是透明的。
</ul>

<H2>8.2 <a name="mpb-examples">边距，边白和边框的示例</a></H2> 

这个例子展示了边距，边白和边框是如何相互作用的。样本HTML文档如下：

<PRE class="html-example">
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
&lt;HTML&gt;
  &lt;HEAD&gt;
    &lt;TITLE&gt;Examples of margins, padding, and borders&lt;/TITLE&gt;
    &lt;STYLE type="text/css"&gt;
      UL { 
        background: green; 
        margin: 12px 12px 12px 12px;
        padding: 3px 3px 3px 3px;
                                     /* No borders set */
      }
      LI { 
        color: black;                /* text color is black */ 
        background: gray;            /* Content, padding will be gray */
        margin: 12px 12px 12px 12px;
        padding: 12px 0px 12px 12px; /* Note 0px padding right */
        list-style: none             /* no glyphs before a list item */
                                     /* No borders set */
      }
      LI.withborder {
        border-style: dashed;
        border-width: medium;        /* sets border width on all sides */
        border-color: black;
      }
    &lt;/STYLE&gt;
  &lt;/HEAD&gt;
  &lt;BODY&gt;
    &lt;UL&gt;
      &lt;LI&gt;First element of list
      &lt;LI class="withborder"&gt;Second element of list is longer
           to illustrate wrapping.
    &lt;/UL&gt;
  &lt;/BODY&gt;
&lt;/HTML&gt;
</PRE>

<p>&nbsp;&nbsp;&nbsp;&nbsp;结果是一个<a href="conform.html#doctree">文档树</a>，带有（在其它关系中）一个UL元素，它有两个LI子元素。

<p>&nbsp;&nbsp;&nbsp;&nbsp;下面的第一张图显示了本例的呈现结果。第二张图显示了UL元素及其子元素LI元素的边距、边白和边框之间的关系。</P>

<div class="figure">
<p>&nbsp;&nbsp;&nbsp;&nbsp;<img src="./images/boxdimeg.gif"
     alt="Image illustrating how parent and child margins, borders,
and padding relate."><SPAN class="dlink">&nbsp;&nbsp;&nbsp;<A name="img-boxdimeg" href="images/longdesc/boxdimeg-desc.html" title="Long description of list box example showing margins,
padding, and borders">[D]</A></SPAN></p>
</div>

<p>&nbsp;&nbsp;&nbsp;&nbsp;注意：</p>

<ul>

<li>每一个LI元素的框的<a href="#content-width">内容宽度</a>的计算是从上而下的；每一个LI框的<a href="visuren.html#containing-block">包含块</a>由UL元素生成。

<li>每一个LI框的高度由它的<a href="#content-height">内容高度</a>给出，还要加上顶底边白，边框和边距。注意LI框间垂直边距的<a href="#collapsing-margins">重合</a>。

<li>LI框的右边白宽度设置为0（<a href="box.html#propdef-padding" class="noxref"><span class="propinst-padding">'padding'</span></a>属性）。在第二个演示中效果明显。

<li>LI框的边距是透明的——边距总是透明的——因此UL边白和内容区域的背景色（绿色）就透了出来。

<li>第二个LI元素规定了一个虚线边框（<a href="box.html#propdef-border-style" class="noxref"><span class="propinst-border-style">'border-style'</span></a>属性）。
</ul>

<H2>8.3 <a name="margin-properties">边距属性</a>：<a href="box.html#propdef-margin-top" class="noxref"><span class="propinst-margin-top">'margin-top'</span></a>，<a href="box.html#propdef-margin-right" class="noxref"><span class="propinst-margin-right">'margin-right'</span></a>，<a href="box.html#propdef-margin-bottom" class="noxref"><span class="propinst-margin-bottom">'margin-bottom'</span></a>，<a href="box.html#propdef-margin-left" class="noxref"><span class="propinst-margin-left">'margin-left'</span></a>以及<a href="box.html#propdef-margin" class="noxref"><span class="propinst-margin">'margin'</span></a></H2>

<p>&nbsp;&nbsp;&nbsp;&nbsp;边距属性设置了一个框的<a href="#box-margin-area">边距区</a>的宽度。<a href="box.html#propdef-margin" class="noxref"><span class="propinst-margin">'margin'</span></a>缩写属性设置所有四边的边距，而其它的边距属性只设置它们代表的那一边的边距。

<p>&nbsp;&nbsp;&nbsp;&nbsp;本节定义的属性引用<span class="index-def" title="&lt;margin-width&gt;::definition of"><a name="value-def-margin-width"><strong>&lt;margin-width&gt;</strong></a></span>值的类型，可以是下面值之一：

<dl>
<dt><a href="syndata.html#value-def-length" class="noxref"><span class="value-inst-length"><strong>&lt;length&gt;</strong></span></a>
<dd>指定一个固定的宽度。
<dt><a href="syndata.html#value-def-percentage" class="noxref"><span class="value-inst-percentage"><strong>&lt;percentage&gt;</strong></span></a>
<dd>百分比的计算基于生成的框的<a href="visuren.html#containing-block">包含块</a>的<em>宽度</em>。对于<a href="box.html#propdef-margin-top" class="noxref"><span class="propinst-margin-top">'margin-top'</span></a>和<a href="box.html#propdef-margin-bottom" class="noxref"><span class="propinst-margin-bottom">'margin-bottom'</span></a>是如此，除非是在<a href="page.html#page-context">页面上下文</a>中（在那里，百分比相对于页面框的高度）。
<dt><strong>auto</strong>
<dd>其表现细节请参见<a href="visudet.html#Computing_widths_and_margins">宽度和边距的计算</a>一章。
</dl>

<p>&nbsp;&nbsp;&nbsp;&nbsp;边距属性允许有负值，不过可能有与实现相关的限制。

<div class="propdef">
<dl><dt>
<span class="index-def" title="'margin-top'"><a name="propdef-margin-top" class="propdef-title"><strong>'margin-top'</strong></a></span>，<span class="index-def" title="'margin-right'"><a name="propdef-margin-right" class="propdef-title"><strong>'margin-right'</strong></a></span>，<span class="index-def" title="'margin-bottom'"><a name="propdef-margin-bottom" class="propdef-title"><strong>'margin-bottom'</strong></a></span>，<span class="index-def" title="'margin-left'"><a name="propdef-margin-left" class="propdef-title"><strong>'margin-left'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>值：</em>&nbsp;&nbsp;<td><a href="box.html#value-def-margin-width" class="noxref"><span class="value-inst-margin-width">&lt;margin-width&gt;</span></a> | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>初始值：</em>&nbsp;&nbsp;<td>0
<tr valign=baseline><td><em>适用于：</em>&nbsp;&nbsp;<td>所有元素
<tr valign=baseline><td><em>可否继承：</em>&nbsp;&nbsp;<td>否
<tr valign=baseline><td><em>百分比：</em>&nbsp;&nbsp;<td>相对于包含块的宽度
<tr valign=baseline><td><em>媒介：</em>&nbsp;&nbsp;<td><a href="media.html#visual-media-group" class="noxref">图形</a>
</table>
</dl>
</div>

<p>&nbsp;&nbsp;&nbsp;&nbsp;这些属性设置框的顶，右，底，左边距。

<div class="example"><P style="display:none">例子：</P><p>&nbsp;&nbsp;&nbsp;&nbsp;
<PRE>
H1 { margin-top: 2em }
</PRE>
</div>

<div class="propdef">
<dl><dt>
<span class="index-def" title="'margin'"><a name="propdef-margin" class="propdef-title"><strong>'margin'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>值：</em>&nbsp;&nbsp;<td><a href="box.html#value-def-margin-width" class="noxref"><span class="value-inst-margin-width">&lt;margin-width&gt;</span></a>{1,4} | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>初始值：</em>&nbsp;&nbsp;<td>对于缩写属性未定义
<tr valign=baseline><td><em>适用于：</em>&nbsp;&nbsp;<td>所有元素
<tr valign=baseline><td><em>可否继承：</em>&nbsp;&nbsp;<td>否
<tr valign=baseline><td><em>百分比：</em>&nbsp;&nbsp;<td>相对于包含块的宽度
<tr valign=baseline><td><em>媒介：</em>&nbsp;&nbsp;<td><a href="media.html#visual-media-group" class="noxref">图形</a>
</table>
</dl>
</div>


<p>&nbsp;&nbsp;&nbsp;&nbsp; <a href="box.html#propdef-margin" class="noxref"><span class="propinst-margin">'margin'</span></a>是在样式表的同一处设置<a href="box.html#propdef-margin-top" class="noxref"><span class="propinst-margin-top">'margin-top'</span></a>，<a href="box.html#propdef-margin-right" class="noxref"><span class="propinst-margin-right">'margin-right'</span></a>，<a href="box.html#propdef-margin-bottom" class="noxref"><span class="propinst-margin-bottom">'margin-bottom'</span></a>以及<a href="box.html#propdef-margin-left" class="noxref"><span class="propinst-margin-left">'margin-left'</span></a>的缩写属性。

<p>&nbsp;&nbsp;&nbsp;&nbsp;如果仅有一个值，它将应用于所有四边。如果有两个值，顶底边距设置为第一个值，左右边距设置为第二个值。如果有三个值，顶边距设置为第一个值，左右边距设置为第二个值，底边距设置为第三个值。如果有四个值，它们分别设置顶，右，底，左边距。

<div class="example"><P style="display:none">例子：</P><p>&nbsp;&nbsp;&nbsp;&nbsp;
<PRE>
BODY { margin: 2em }         /* 所有的边距都设置为2em */
BODY { margin: 1em 2em }     /* top &amp; bottom = 1em, right &amp; left = 2em */
BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */
</PRE>

<p>&nbsp;&nbsp;&nbsp;&nbsp; 上例中最后一个规则等同于如下的例子：

<PRE>
BODY {
  margin-top: 1em;
  margin-right: 2em;
  margin-bottom: 3em;
  margin-left: 2em;        /* 从相对边（右边）拷贝而来 */
}
</PRE>
</div>

<H3>8.3.1 <a name="collapsing-margins">边距重合</a></H3>

<p>&nbsp;&nbsp;&nbsp;&nbsp;在本规范中，表述<a name="x24"><span class="index-def" title="collapsing margin"><dfn>边距重合</dfn></span></a>意味着两个或多个框（可能相邻也可能嵌套）的相邻的边距（其间没有边白或边框间隔）重合在一起而形成一个单一的边距。

<p>&nbsp;&nbsp;&nbsp;&nbsp;CSS2中，<a name="x25"><span class="index-inst" title="horizontal
margin|margin::horizontal">水平边距</span></a>永远不会重合。

<p>&nbsp;&nbsp;&nbsp;&nbsp;<a name="x27"><span class="index-inst" title="vertical margin|margin::vertical">垂直边距</span></a>可能在特定的框之间重合：</p>

<ul>
<li><a href="visuren.html#normal-flow">常规流向</a>中两个或多个<a href="visuren.html#block-box">块</a>框相邻的垂直边距会重合。结果的边距宽度是相邻边距宽度中较大的值。如果出现负边距，则在最大的正边距中减去绝对值最大的负边距。如果没有正边距，则从零中减去绝对值最大的负边距。

<li>在一个<a href="visuren.html#floats">浮动</a>框和其它框之间的垂直边距不重合。

<li><a href="visuren.html#absolutely-positioned">绝对</a>和相对定位的框的边距不重合。
</ul>

<p>&nbsp;&nbsp;&nbsp;&nbsp;请参见<a href="#mpb-examples">边距，边白和边框的示例</a>一章，以了解边距重合的例子。

<H2>8.4 <a name="padding-properties">边白属性</a>：
<a href="box.html#propdef-padding-top" class="noxref"><span class="propinst-padding-top">'padding-top'</span></a>，<a href="box.html#propdef-padding-right" class="noxref"><span class="propinst-padding-right">'padding-right'</span></a>，<a href="box.html#propdef-padding-bottom" class="noxref"><span class="propinst-padding-bottom">'padding-bottom'</span></a>，<a href="box.html#propdef-padding-left" class="noxref"><span class="propinst-padding-left">'padding-left'</span></a>及<a href="box.html#propdef-padding" class="noxref"><span class="propinst-padding">'padding'</span></a>
</H2> 

<p>&nbsp;&nbsp;&nbsp;&nbsp;边白属性规定了一个框的<a href="#box-padding-area">边白区</a>的宽度。<a href="box.html#propdef-padding" class="noxref"><span class="propinst-padding">'padding'</span></a>缩写属性设置所有四边的边白，而其它的边白属性只设置它们代表的那一边的边白。

<p>&nbsp;&nbsp;&nbsp;&nbsp;本节所定义的属性引用<span class="index-def" title="&lt;padding-width&gt;::definition of"><a name="value-def-padding-width"><strong>&lt;padding-width&gt;</strong></a></span>值类型，可以取下列值：</p>

<dl>
<dt><a href="syndata.html#value-def-length" class="noxref"><span class="value-inst-length"><strong>&lt;length&gt;</strong></span></a>
<dd>指定一个确定宽度。
<dt><a href="syndata.html#value-def-percentage" class="noxref"><span class="value-inst-percentage"><strong>&lt;percentage&gt;</strong></span></a>
<dd>百分比的计算基于生成的框的包含块的宽度，即使是对于<a href="box.html#propdef-padding-top" class="noxref"><span class="propinst-padding-top">'padding-top'</span></a>和<a href="box.html#propdef-padding-bottom" class="noxref"><span class="propinst-padding-bottom">'padding-bottom'</span></a>也是如此。
</dl>

<p>&nbsp;&nbsp;&nbsp;&nbsp;和边距属性不同，边白值不可以是负数。和边距属性相似，边白的百分比值也基于生成的框的包含块的宽度。

<div class="propdef">
<dl><dt>
<span class="index-def" title="'padding-top'"><a name="propdef-padding-top" class="propdef-title"><strong>'padding-top'</strong></a></span>，<span class="index-def" title="'padding-right'"><a name="propdef-padding-right" class="propdef-title"><strong>'padding-right'</strong></a></span>，<span class="index-def" title="'padding-bottom'"><a name="propdef-padding-bottom" class="propdef-title"><strong>'padding-bottom'</strong></a></span>，<span class="index-def" title="'padding-left'"><a name="propdef-padding-left" class="propdef-title"><strong>'padding-left'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>值：</em>&nbsp;&nbsp;<td><a href="box.html#value-def-padding-width" class="noxref"><span class="value-inst-padding-width">&lt;padding-width&gt;</span></a> | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>初始值：</em>&nbsp;&nbsp;<td>0
<tr valign=baseline><td><em>适用于：</em>&nbsp;&nbsp;<td>所有元素
<tr valign=baseline><td><em>可否继承：</em>&nbsp;&nbsp;<td>否
<tr valign=baseline><td><em>百分比：</em>&nbsp;&nbsp;<td>相对于包含块的宽度
<tr valign=baseline><td><em>媒介：</em>&nbsp;&nbsp;<td><a href="media.html#visual-media-group" class="noxref">图形</a>
</table>
</dl>
</div>


<p>&nbsp;&nbsp;&nbsp;&nbsp;这些属性设置一个框的顶，右，底，左的边白。

<div class="example"><P style="display:none">例子：</P><p>&nbsp;&nbsp;&nbsp;&nbsp;
<PRE>
BLOCKQUOTE { padding-top: 0.3em }
</PRE>
</div>

<div class="propdef">
<dl><dt>
<span class="index-def" title="'padding'"><a name="propdef-padding" class="propdef-title"><strong>'padding'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>值：</em>&nbsp;&nbsp;<td><a href="box.html#value-def-padding-width" class="noxref"><span class="value-inst-padding-width">&lt;padding-width&gt;</span></a>{1,4} | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>初始值：</em>&nbsp;&nbsp;<td>对于缩写属性未定义
<tr valign=baseline><td><em>适用于：</em>&nbsp;&nbsp;<td>所有元素
<tr valign=baseline><td><em>可否继承：</em>&nbsp;&nbsp;<td>否
<tr valign=baseline><td><em>百分比：</em>&nbsp;&nbsp;<td>相对于包含块的宽度
<tr valign=baseline><td><em>媒介：</em>&nbsp;&nbsp;<td><a href="media.html#visual-media-group" class="noxref">图形</a>
</table>
</dl>
</div>


<p>&nbsp;&nbsp;&nbsp;&nbsp; <a href="box.html#propdef-padding" class="noxref"><span class="propinst-padding">'padding'</span></a>属性是在样式表中的同一处设置<a href="box.html#propdef-padding-top" class="noxref"><span class="propinst-padding-top">'padding-top'</span></a>，<a href="box.html#propdef-padding-right" class="noxref"><span class="propinst-padding-right">'padding-right'</span></a>，<a href="box.html#propdef-padding-bottom" class="noxref"><span class="propinst-padding-bottom">'padding-bottom'</span></a>及<a href="box.html#propdef-padding-left" class="noxref"><span class="propinst-padding-left">'padding-left'</span></a>的缩写属性。

<p>&nbsp;&nbsp;&nbsp;&nbsp;如果只有一个值，它适用于所有四边。如果有两个值，顶底边白设置为第一个值而左右边距设置为第二个值。如果有三个值，顶边白设置为第一个值，左右边白设置为第二个值，底边白设置为第三个值。如果有四个值，它们分别设置顶，右，底，左边白。

<p>&nbsp;&nbsp;&nbsp;&nbsp;边白区域的表面颜色或图形由<a href="colors.html#propdef-background" class="noxref"><span class="propinst-background">'background'</span></a>属性确定：

<div class="example"><P style="display:none">例子：</P><p>&nbsp;&nbsp;&nbsp;&nbsp;
<PRE>
H1 { 
  background: white; 
  padding: 1em 2em;
} 
</PRE>

<p>&nbsp;&nbsp;&nbsp;&nbsp;上例中指定垂直边白（<a href="box.html#propdef-padding-top" class="noxref"><span class="propinst-padding-top">'padding-top'</span></a>和<a href="box.html#propdef-padding-bottom" class="noxref"><span class="propinst-padding-bottom">'padding-bottom'</span></a>）为'1em'而水平边白（<a href="box.html#propdef-padding-right" class="noxref"><span class="propinst-padding-right">'padding-right'</span></a>和<a href="box.html#propdef-padding-left" class="noxref"><span class="propinst-padding-left">'padding-left'</span></a>）为'2em'。'em'单位是<a href="syndata.html#absrel-units">相对</a>于元素的字体尺寸的单位：'1em'等于使用的字体的尺寸。
</div>

<H2>8.5 <a name="border-properties">边框属性</a></H2>

<p>&nbsp;&nbsp;&nbsp;&nbsp;边框属性设置框的<a href="#box-border-area">边框区</a>的宽度，颜色和样式。这些属性使用于所有的元素。


<div class="note"><p>&nbsp;&nbsp;&nbsp;&nbsp;
<em><strong>注意。</strong>对于HTML而言，用户端对于某些元素（如按钮，菜单等）边框的渲染和其它“一般”元素可能有所不同。</em>
</div>

<H3>8.5.1 <a name="border-width-properties">边框宽度</A>：<a href="box.html#propdef-border-top-width" class="noxref"><span class="propinst-border-top-width">'border-top-width'</span></a>，<a href="box.html#propdef-border-right-width" class="noxref"><span class="propinst-border-right-width">'border-right-width'</span></a>，<a href="box.html#propdef-border-bottom-width" class="noxref"><span class="propinst-border-bottom-width">'border-bottom-width'</span></a>，<a href="box.html#propdef-border-left-width" class="noxref"><span class="propinst-border-left-width">'border-left-width'</span></a>及<a href="box.html#propdef-border-width" class="noxref"><span class="propinst-border-width">'border-width'</span></a></H3>

<p>&nbsp;&nbsp;&nbsp;&nbsp;边框宽度设置<a href="#box-border-area">边框区</a>的宽度。本节中定义的属性引用<span class="index-def" title="&lt;border-width&gt;::definition of"><a name="value-def-border-width" class="value-def"><strong>&lt;border-width&gt;</strong></a></span>值类型，可以取如下值：</P>

<dl>
<dt><strong>thin</strong>
<dd>一个窄的边框。
<dt><strong>medium</strong>
<dd>一个中等的边框。
<dt><strong>thick</strong>
<dd>一个厚边框。
<dt><a href="syndata.html#value-def-length" class="noxref"><span class="value-inst-length"><strong>&lt;length&gt;</strong></span></a>
<dd>边框的厚度是显式值。显式的边框宽度不能为负数。
</dl>

<p>&nbsp;&nbsp;&nbsp;&nbsp;前三个值的解释取决于用户端。不过必须遵循如下关系：

<p>&nbsp;&nbsp;&nbsp;&nbsp;'thin' &lt;='medium' &lt;= 'thick'.  

<p>&nbsp;&nbsp;&nbsp;&nbsp;另外，在一个文档中，这些宽度必须保持一致。

<div class="propdef">
<dl><dt>
<span class="index-def" title="'border-top-width'"><a name="propdef-border-top-width" class="propdef-title"><strong>'border-top-width'</strong></a></span>, <span class="index-def" title="'border-right-width'"><a name="propdef-border-right-width" class="propdef-title"><strong>'border-right-width'</strong></a></span>, <span class="index-def" title="'border-bottom-width'"><a name="propdef-border-bottom-width" class="propdef-title"><strong>'border-bottom-width'</strong></a></span>, <span class="index-def" title="'border-left-width'"><a name="propdef-border-left-width" class="propdef-title"><strong>'border-left-width'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>值：</em>&nbsp;&nbsp;<td><a href="box.html#value-def-border-width" class="noxref"><span class="value-inst-border-width">&lt;border-width&gt;</span></a> | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>初始值：</em>&nbsp;&nbsp;<td>medium
<tr valign=baseline><td><em>适用于：</em>&nbsp;&nbsp;<td>所有元素
<tr valign=baseline><td><em>可否继承：</em>&nbsp;&nbsp;<td>否
<tr valign=baseline><td><em>百分比：</em>&nbsp;&nbsp;<td>N/A
<tr valign=baseline><td><em>媒介：</em>&nbsp;&nbsp;<td><a href="media.html#visual-media-group" class="noxref">图形</a>
</table>
</dl>
</div>

<p>&nbsp;&nbsp;&nbsp;&nbsp;这些属性设置框的顶底左右边框的宽度。

<div class="propdef">
<dl><dt>
<span class="index-def" title="'border-width'"><a name="propdef-border-width" class="propdef-title"><strong>'border-width'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>值：</em>&nbsp;&nbsp;<td><a href="box.html#value-def-border-width" class="noxref"><span class="value-inst-border-width">&lt;border-width&gt;</span></a>{1,4} | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>初始值：</em>&nbsp;&nbsp;<td>见个别属性
<tr valign=baseline><td><em>适用于：</em>&nbsp;&nbsp;<td>所有元素
<tr valign=baseline><td><em>可否继承：</em>&nbsp;&nbsp;<td>否
<tr valign=baseline><td><em>百分比：</em>&nbsp;&nbsp;<td>N/A
<tr valign=baseline><td><em>媒介：</em>&nbsp;&nbsp;<td><a href="media.html#visual-media-group" class="noxref">图形</a>
</table>
</dl>
</div>

<p>&nbsp;&nbsp;&nbsp;&nbsp;该属性是在样式表的同一处设置<a href="box.html#propdef-border-top-width" class="noxref"><span class="propinst-border-top-width">'border-top-width'</span></a>，<a href="box.html#propdef-border-right-width" class="noxref"><span class="propinst-border-right-width">'border-right-width'</span></a>，<a href="box.html#propdef-border-bottom-width" class="noxref"><span class="propinst-border-bottom-width">'border-bottom-width'</span></a>及<a href="box.html#propdef-border-left-width" class="noxref"><span class="propinst-border-left-width">'border-left-width'</span></a>的缩写属性。

<p>&nbsp;&nbsp;&nbsp;&nbsp;如果只有一个值，它适用于所有四边。如果有两个值，顶底边框采用第一个值，左右边框采用第二个值。如果有三个值，顶边框采用第一个值，左右边框采用第二个值，而底边框采用第三个值。如果有四个值，它们分别适用于顶，右，底，左四边。

<div class="example"><P style="display:none">例子：</P>
<p>&nbsp;&nbsp;&nbsp;&nbsp;下例中，注释行标出了结果的顶，右，底，左边框的宽度：

<PRE>
H1 { border-width: thin }                   /* thin thin thin thin */
H1 { border-width: thin thick }             /* thin thick thin thick */
H1 { border-width: thin thick medium }      /* thin thick medium thick */
</PRE>
</div>

<H3>8.5.2 <A name="border-color-properties">边框颜色</A>：
<a href="box.html#propdef-border-top-color" class="noxref"><span class="propinst-border-top-color">'border-top-color'</span></a>，<a href="box.html#propdef-border-right-color" class="noxref"><span class="propinst-border-right-color">'border-right-color'</span></a>，<a href="box.html#propdef-border-bottom-color" class="noxref"><span class="propinst-border-bottom-color">'border-bottom-color'</span></a>，<a href="box.html#propdef-border-left-color" class="noxref"><span class="propinst-border-left-color">'border-left-color'</span></a>及<a href="box.html#propdef-border-color" class="noxref"><span class="propinst-border-color">'border-color'</span></a>
</H3>

<p>&nbsp;&nbsp;&nbsp;&nbsp;边框颜色属性指定了框的边框的颜色。

<div class="propdef">
<dl><dt>
<span class="index-def" title="'border-top-color'"><a name="propdef-border-top-color" class="propdef-title"><strong>'border-top-color'</strong></a></span>，<span class="index-def" title="'border-right-color'"><a name="propdef-border-right-color" class="propdef-title"><strong>'border-right-color'</strong></a></span>，<span class="index-def" title="'border-bottom-color'"><a name="propdef-border-bottom-color" class="propdef-title"><strong>'border-bottom-color'</strong></a></span>，<span class="index-def" title="'border-left-color'"><a name="propdef-border-left-color" class="propdef-title"><strong>'border-left-color'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>值：</em>&nbsp;&nbsp;<td><a href="syndata.html#value-def-color" class="noxref"><span class="value-inst-color">&lt;color&gt;</span></a> | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>初始值：</em>&nbsp;&nbsp;<td>'color'属性的值
<tr valign=baseline><td><em>适用于：</em>&nbsp;&nbsp;<td>所有元素
<tr valign=baseline><td><em>可否继承：</em>&nbsp;&nbsp;<td>否
<tr valign=baseline><td><em>百分比：</em>&nbsp;&nbsp;<td>N/A
<tr valign=baseline><td><em>媒介：</em>&nbsp;&nbsp;<td><a href="media.html#visual-media-group" class="noxref">图形</a>
</table>
</dl>
</div>

<div class="propdef">
<dl><dt>
<span class="index-def" title="'border-color'"><a name="propdef-border-color" class="propdef-title"><strong>'border-color'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>值：</em>&nbsp;&nbsp;<td><a href="syndata.html#value-def-color" class="noxref"><span class="value-inst-color">&lt;color&gt;</span></a>{1,4} | transparent | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>初始值：</em>&nbsp;&nbsp;<td>见个别属性
<tr valign=baseline><td><em>适用于：</em>&nbsp;&nbsp;<td>所有元素
<tr valign=baseline><td><em>可否继承：</em>&nbsp;&nbsp;<td>否
<tr valign=baseline><td><em>百分比：</em>&nbsp;&nbsp;<td>N/A
<tr valign=baseline><td><em>媒介：</em>&nbsp;&nbsp;<td><a href="media.html#visual-media-group" class="noxref">图形</a>
</table>
</dl>
</div>

<p>&nbsp;&nbsp;&nbsp;&nbsp;<a href="box.html#propdef-border-color" class="noxref"><span class="propinst-border-color">'border-color'</span></a>属性设置四个边框的颜色。它的值的含义如下：</p>

<dl>
<dt><span class="index-inst" title="&lt;color&gt;"><a name="x46" href="syndata.html#value-def-color" class="noxref"><span
class="value-inst-color"><strong>&lt;color&gt;</strong></span></a></span>
<dd>指定一个颜色值。
<dt><strong>transparent</strong>
<dd>边框是透明的（尽管它还有宽度）。
</dl>

<p>&nbsp;&nbsp;&nbsp;&nbsp;<a href="box.html#propdef-border-color" class="noxref"><span class="propinst-border-color">'border-color'</span></a>属性可以有一个到四个值，这些值设置不同的边，方法和<a href="box.html#propdef-border-width" class="noxref"><span class="propinst-border-width">'border-width'</span></a>相同。

<p>&nbsp;&nbsp;&nbsp;&nbsp;如果没有用边框属性指定一个元素的边框颜色，用户端必须用该元素的<a href="colors.html#propdef-color" class="noxref"><span class="propinst-color">'color'</span></a>属性来作为边框颜色的<a href="cascade.html#computed-value">计算值</a>。

<div class="example"><P style="display:none">例子：</P>
<p>&nbsp;&nbsp;&nbsp;&nbsp;下例中，边框是黑色实线。
<PRE>
P { 
  color: black; 
  background: white; 
  border: solid;
}
</PRE>
</div>

<H3>8.5.3 <A name="border-style-properties">边框样式</a>：<a href="box.html#propdef-border-top-style" class="noxref"><span class="propinst-border-top-style">'border-top-style'</span></a>，<a href="box.html#propdef-border-right-style" class="noxref"><span class="propinst-border-right-style">'border-right-style'</span></a>，<a href="box.html#propdef-border-bottom-style" class="noxref"><span class="propinst-border-bottom-style">'border-bottom-style'</span></a>，<a href="box.html#propdef-border-left-style" class="noxref"><span class="propinst-border-left-style">'border-left-style'</span></a>及<a href="box.html#propdef-border-style" class="noxref"><span class="propinst-border-style">'border-style'</span></a></H3>

<p>&nbsp;&nbsp;&nbsp;&nbsp;边框样式指定框的边框的线型（实线，双线，点线等）。本节中定义的属性引用<span class="index-def" title="&lt;border-style&gt;, definition of"><a name="value-def-border-style"><strong>&lt;border-style&gt;</strong></a></span>值类型，取值为：</p>

<dl>
<dt><strong><span class="index-def" title="'none'::as border style"><a name="value-def-bo-none" class="value-def">none</a></span></strong>
<dd>没有边框。该值迫使<a href="box.html#propdef-border-width" class="noxref"><span class="propinst-border-width">'border-width'</span></a>的计算值为0。
to be '0'. 
<dt><strong><span class="index-def" title="'hidden'"><a name="value-def-hidden" class="value-def">hidden</a></span></strong>
<dd>和'none'相似，除非在<a href="tables.html">表格元素</a>中<a href="tables.html#border-conflict-resolution">解决边框冲突</a>时。
<dt><strong><span class="index-def" title="'dotted'"><a name="value-def-dotted" class="value-def">dotted</a></span></strong>
<dd>边框是一系列的点。
<dt><strong><span class="index-def" title="'dashed'"><a name="value-def-dashed" class="value-def">dashed</a></span></strong>
<dd>边框是一系列的短线条的段。
<dt><strong><span class="index-def" title="'solid'"><a name="value-def-solid" class="value-def">solid</a></span></strong>
<dd>边框是一条单一的线。
<dt><strong><span class="index-def" title="'double'"><a name="value-def-double" class="value-def">double</a></span></strong>
<dd>边框有两条实线。两条线宽和其中的空白的宽度之和等于<a href="box.html#propdef-border-width" class="noxref"><span class="propinst-border-width">'border-width'</span></a>的值。
<dt><strong><span class="index-def" title="'groove'"><a name="value-def-groove" class="value-def">groove</a></span></strong>
<dd>边框看上去好象是雕刻在画布之内。
<dt><strong><span class="index-def" title="'ridge'"><a name="value-def-ridge" class="value-def">ridge</a></span></strong>
<dd>和'grove'相反：边框看上去好象是从画布中凸出来。
<dt><strong><span class="index-def" title="'inset'"><a name="value-def-inset" class="value-def">inset</a></span></strong>
<dd>该边框使整个框看上去好象是嵌在画布中。
<dt><strong><span class="index-def" title="'outset'"><a name="value-def-outset" class="value-def">outset</a></span></strong>
<dd>和'inset'相反：该边框使整个框看上去好象是从画布中凸出来。
</dl>

<p>&nbsp;&nbsp;&nbsp;&nbsp;所有的边框画在框的背景之上。'groove'，'ridge'，'inset'和'outset'类型的边框的颜色取决于元素的<a href="colors.html#propdef-color" class="noxref"><span class="propinst-color">'color'</span></a>属性。

<p>&nbsp;&nbsp;&nbsp;&nbsp;<span class="index-inst" title="conformance"><a name="x58" href="conform.html#conformance">和CSS一致的用户端</a></span>可能将'dotted'，'dashed'，'double'，'groove'，'ridge'，'inset'及'outset'为'solid'。

<div class="propdef">
<dl><dt>
<span class="index-def" title="'border-top-style'"><a name="propdef-border-top-style" class="propdef-title"><strong>'border-top-style'</strong></a></span>，<span class="index-def" title="'border-right-style'"><a name="propdef-border-right-style" class="propdef-title"><strong>'border-right-style'</strong></a></span>，<span class="index-def" title="'border-bottom-style'"><a name="propdef-border-bottom-style" class="propdef-title"><strong>'border-bottom-style'</strong></a></span>，<span class="index-def" title="'border-left-style'"><a name="propdef-border-left-style" class="propdef-title"><strong>'border-left-style'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>值：</em>&nbsp;&nbsp;<td><a href="box.html#value-def-border-style" class="noxref"><span class="value-inst-border-style">&lt;border-style&gt;</span></a> | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>初始值：</em>&nbsp;&nbsp;<td>none
<tr valign=baseline><td><em>适用于：</em>&nbsp;&nbsp;<td>所有元素
<tr valign=baseline><td><em>可否继承：</em>&nbsp;&nbsp;<td>否
<tr valign=baseline><td><em>百分比：</em>&nbsp;&nbsp;<td>N/A
<tr valign=baseline><td><em>媒介：</em>&nbsp;&nbsp;<td><a href="media.html#visual-media-group" class="noxref">图形</a>
</table>
</dl>
</div>

<div class="propdef">
<dl><dt>
<span class="index-def" title="'border-style'"><a name="propdef-border-style" class="propdef-title"><strong>'border-style'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>值：</em>&nbsp;&nbsp;<td><a href="box.html#value-def-border-style" class="noxref"><span class="value-inst-border-style">&lt;border-style&gt;</span></a>{1,4} | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>初始值：</em>&nbsp;&nbsp;<td>参见各个别属性
<tr valign=baseline><td><em>适用于：</em>&nbsp;&nbsp;<td>所有元素
<tr valign=baseline><td><em>可否继承：</em>&nbsp;&nbsp;<td>否
<tr valign=baseline><td><em>百分比：</em>&nbsp;&nbsp;<td>N/A
<tr valign=baseline><td><em>媒介：</em>&nbsp;&nbsp;<td><a href="media.html#visual-media-group" class="noxref">图形</a>
</table>
</dl>
</div>


<p>&nbsp;&nbsp;&nbsp;&nbsp;<a href="box.html#propdef-border-style" class="noxref"><span class="propinst-border-style">'border-style'</span></a>属性设置四边的样式。它可以有一个到四个值，分别设置不同的边，方法同<a href="box.html#propdef-border-width" class="noxref"><span class="propinst-border-width">'border-width'</span></a>。

<div class="example"><P style="display:none">例子：</P><p>&nbsp;&nbsp;&nbsp;&nbsp;
<PRE>
#xy34 { border-style: solid dotted }
</PRE>
<p>&nbsp;&nbsp;&nbsp;&nbsp;上例中，水平边框是'solid'而垂直边框是'dotted'。
</div>

<p>&nbsp;&nbsp;&nbsp;&nbsp;由于边框样式的初始值是'none'，因此，除非设置了边框样式，没有任何边框可见。

<H3>8.5.4 <A name="border-shorthand-properties">边框缩写属性</a>：<a href="box.html#propdef-border-top" class="noxref"><span class="propinst-border-top">'border-top'</span></a>，<a href="box.html#propdef-border-bottom" class="noxref"><span class="propinst-border-bottom">'border-bottom'</span></a>，<a href="box.html#propdef-border-right" class="noxref"><span class="propinst-border-right">'border-right'</span></a>，<a href="box.html#propdef-border-left" class="noxref"><span class="propinst-border-left">'border-left'</span></a>及<a href="box.html#propdef-border" class="noxref"><span class="propinst-border">'border'</span></a></h3>

<div class="propdef">
<dl><dt>
<span class="index-def" title="'border-top'"><a name="propdef-border-top" class="propdef-title"><strong>'border-top'</strong></a></span>，<span class="index-def" title="'border-right'"><a name="propdef-border-right" class="propdef-title"><strong>'border-right'</strong></a></span>，<span class="index-def" title="'border-bottom'"><a name="propdef-border-bottom" class="propdef-title"><strong>'border-bottom'</strong></a></span>，<span class="index-def" title="'border-left'"><a name="propdef-border-left" class="propdef-title"><strong>'border-left'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>值：</em>&nbsp;&nbsp;<td>[ <a href="box.html#propdef-border-top-width" class="noxref"><span class="propinst-border-top-width">&lt;'border-top-width'&gt;</span></a> || <a href="box.html#propdef-border-style" class="noxref"><span class="propinst-border-style">&lt;'border-style'&gt;</span></a> || <a href="syndata.html#value-def-color" class="noxref"><span class="value-inst-color">&lt;color&gt;</span></a> ] | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>初始值：</em>&nbsp;&nbsp;<td>见各个别属性
<tr valign=baseline><td><em>适用于：</em>&nbsp;&nbsp;<td>所有元素
<tr valign=baseline><td><em>可否继承：</em>&nbsp;&nbsp;<td>否
<tr valign=baseline><td><em>百分比：</em>&nbsp;&nbsp;<td>N/A
<tr valign=baseline><td><em>媒介：</em>&nbsp;&nbsp;<td><a href="media.html#visual-media-group" class="noxref">图形</a>
</table>
</dl>
</div>


<p>&nbsp;&nbsp;&nbsp;&nbsp;这是一个设置框的顶底左右边框的宽度，样式和颜色的缩写属性。

<div class="example"><P style="display:none">例子：</P><p>&nbsp;&nbsp;&nbsp;&nbsp;
<PRE>
H1 { border-bottom: thick solid red }
</PRE>

<p>&nbsp;&nbsp;&nbsp;&nbsp;上面这一规则将设置H1元素<strong>底</strong>边框的宽度，样式和颜色。省略掉的值将设置为它们各自的<a href="cascade.html#initial-value">初始值</a>。由于下面这一规则并没有指定边框颜色，边框的颜色将由<a href="colors.html#propdef-color" class="noxref"><span class="propinst-color">'color'</span></a>属性指定：

<PRE>
H1 { border-bottom: thick solid }
</PRE>
</div>

<div class="propdef">
<dl><dt>
<span class="index-def" title="'border'"><a name="propdef-border" class="propdef-title"><strong>'border'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>值：</em>&nbsp;&nbsp;<td>[ <a href="box.html#propdef-border-width" class="noxref"><span class="propinst-border-width">&lt;'border-width'&gt;</span></a> || <a href="box.html#propdef-border-style" class="noxref"><span class="propinst-border-style">&lt;'border-style'&gt;</span></a> || <a href="syndata.html#value-def-color" class="noxref"><span class="value-inst-color">&lt;color&gt;</span></a> ] | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>初始值：</em>&nbsp;&nbsp;<td>见各个别属性
<tr valign=baseline><td><em>适用于：</em>&nbsp;&nbsp;<td>所有元素
<tr valign=baseline><td><em>可否继承：</em>&nbsp;&nbsp;<td>否
<tr valign=baseline><td><em>百分比：</em>&nbsp;&nbsp;<td>N/A
<tr valign=baseline><td><em>媒介：</em>&nbsp;&nbsp;<td><a href="media.html#visual-media-group" class="noxref">图形</a>
</table>
</dl>
</div>


<p>&nbsp;&nbsp;&nbsp;&nbsp;<a href="box.html#propdef-border" class="noxref"><span class="propinst-border">'border'</span></a>属性是设置框的四个边框为相同的宽度，颜色和样式的缩写属性。和缩写属性<a href="box.html#propdef-margin" class="noxref"><span class="propinst-margin">'margin'</span></a>和<a href="box.html#propdef-padding" class="noxref"><span class="propinst-padding">'padding'</span></a>不同，<a href="box.html#propdef-border" class="noxref"><span class="propinst-border">'border'</span></a>属性不可以对四边设置不同的值。要达到这一目的，必须使用另外一个或多个边框属性。

<div class="example"><P style="display:none">例子：</P><p>&nbsp;&nbsp;&nbsp;&nbsp;例如，下面的第一条规则等同于跟随其后的四个规则：
<PRE>
P { border: solid red }
P {
  border-top: solid red;
  border-right: solid red;
  border-bottom: solid red;
  border-left: solid red
}
</PRE>
</div>

<p>&nbsp;&nbsp;&nbsp;&nbsp;由于在某种程度上，属性具有覆盖的特性，因此指定规则的顺序很重要。

<div class="example"><P style="display:none">例子：</P><p>&nbsp;&nbsp;&nbsp;&nbsp;考虑这样一个例子：
<PRE>
BLOCKQUOTE {
  border-color: red;
  border-left: double;
  color: black
}
</PRE>

<p>&nbsp;&nbsp;&nbsp;&nbsp;在上例中，左边框的颜色是黑色，而其它边框的颜色是红色。这是因为<a href="box.html#propdef-border-left" class="noxref"><span class="propinst-border-left">'border-left'</span></a>设置了宽度，样式和颜色。由于<a href="box.html#propdef-border-left" class="noxref"><span class="propinst-border-left">'border-left'</span></a>属性并没有给出颜色值，它将从<a href="colors.html#propdef-color" class="noxref"><span class="propinst-color">'color'</span></a>属性中获得值，并与<a href="colors.html#propdef-color" class="noxref"><span class="propinst-color">'color'</span></a>属性设置在<a href="box.html#propdef-border-left" class="noxref"><span class="propinst-border-left">'border-left'</span></a>之后这一事实无关。
</div>

<hr class="navbar">

<div class="navbar" align="center">
<p><a href="media.html">上一篇</a> &nbsp;
<a href="visuren.html">下一篇</a> &nbsp;
<a href="cover.html#minitoc">目录</a> &nbsp;
<a href="propidx.html">属性</a> &nbsp;
<a href="indexlist.html">索引</a> &nbsp;
</div>
</BODY>
</HTML>